import { defineComponent, computed } from "vue"
import { inject } from "vue"

import FooterTd from "./footer-td"
import { COMPS_NAME, EMIT_EVENTS, COMPS_CUSTOM_ATTRS } from "../util/constant"
import VueDomResizeObserver from "amtf/components/resize-observer"
import { useEmitter } from "amtf/hooks"

import { use样式 } from "amtf/hooks"
import { getValByUnit, 拼组件名, isFunction, isBoolean, getRandomId } from "amtf/utils"
const 主名 = "table-body-tr"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        rowData: {
            type: Object,
            required: true,
        },
        rowIndex: {
            type: Number,
            required: true,
        },
        colgroups: {
            type: Array,
            required: true,
        },
        rowKeyFieldName: {
            type: String,
            default: null,
        },
        // cell style option
        cellStyleOption: {
            type: Object,
            default: () => null,
        },
        // cell span option
        cellSpanOption: {
            type: Object,
            default: () => null,
        },
        // event custom option
        eventCustomOption: {
            type: Object,
            default: () => null,
        },
        // cell selection key data
        cellSelectionData: {
            type: Object,
            default: () => null,
        },
        // footer rows
        footerRows: {
            type: Array,
            default: () => [],
        },
        // fixed footer
        fixedFooter: {
            type: Boolean,
            default: true,
        },
    },
    setup(props) {
        const { 拼样式名_table直属 } = use样式(主名)
        const { dispatch } = useEmitter(inject("表格id"))

        const currentRowKey = computed(() => {
            const { rowKeyFieldName } = props
            return rowKeyFieldName ? props.rowData[rowKeyFieldName] : null
        })

        const trClass = computed(() => ({
            [拼样式名_table直属("footer-tr")]: true,
        }))

        const trHeightChange = ({ height }) => {
            console.log(`trHeightChange ing👇`)
            dispatch(EMIT_EVENTS.FOOTER_ROW_HEIGHT_CHANGE, {
                rowIndex: props.rowIndex,
                height: height,
            })
        }

        const rowClick = (e, fn) => {
            if (fn) fn(e)
        }

        const rowDblclick = (e, fn) => {
            if (fn) fn(e)
        }

        const rowContextmenu = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMouseenter = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMouseleave = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMousemove = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMouseover = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMousedown = (e, fn) => {
            if (fn) fn(e)
        }

        const rowMouseup = (e, fn) => {
            if (fn) fn(e)
        }
        // console.log(`props.footerRows 👉`, props.footerRows)

        const getTdContent = () => {
            return props.colgroups.map(column => (
                <FooterTd
                    key={column.key}
                    {...{
                        rowIndex: props.rowIndex,
                        rowData: props.rowData,
                        column: column,
                        colgroups: props.colgroups,
                        rowKeyFieldName: props.rowKeyFieldName,
                        cellStyleOption: props.cellStyleOption,
                        cellSelectionData: props.cellSelectionData,
                        footerRows: props.footerRows,
                        fixedFooter: props.fixedFooter,
                        cellSpanOption: props.cellSpanOption,
                        eventCustomOption: props.eventCustomOption,
                    }}
                />
            ))
        }

        const customEvents = props.eventCustomOption
            ? props.eventCustomOption.footerRowEvents
                ? props.eventCustomOption.footerRowEvents({
                      row: props.rowData,
                      rowIndex: props.rowIndex,
                  })
                : {}
            : {}

        const events = {
            onClick: e => rowClick(e, customEvents.click),
            onDblclick: e => rowDblclick(e, customEvents.dblclick),
            onContextmenu: e => rowContextmenu(e, customEvents.contextmenu),
            onMouseenter: e => rowMouseenter(e, customEvents.mouseenter),
            onMouseleave: e => rowMouseleave(e, customEvents.mouseleave),
            onMousemove: e => rowMousemove(e, customEvents.mousemove),
            onMouseover: e => rowMouseover(e, customEvents.mouseover),
            onMousedown: e => rowMousedown(e, customEvents.mousedown),
            onMouseup: e => rowMouseup(e, customEvents.mouseup),
        }

        const props2 = {
            class: trClass.value,
            tagName: "tr",
            [COMPS_CUSTOM_ATTRS.BODY_ROW_KEY]: currentRowKey.value,
            ...events,
            onDomResizeChange: trHeightChange,
        }

        return () => <VueDomResizeObserver {...props2}>{getTdContent()}</VueDomResizeObserver>
    },
})
